<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="why">
      <h2 v-if="isShow">Hello World</h2>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style lang="less">
.why-enter-from,
.why-leave-to {
  opacity: 0;
}
//下面这个可以不写,默认进入后为1
.why-enter-to,
.why-leave-from {
  opacity: 1;
}
.why-enter-active,
.why-leave-active {
  transition: opacity 2s ease;
}
</style>
